﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta charset="utf-8" />
    <title>路由测试</title>
    <script src="Javascript/vue.js"></script>
</head>
<body>
    <div id="app"></div>
<script>
    var routes={
        "home":{template:'<h1>这是home<a href="#about">about</a></h1>'},
        "about":{template:'<h1>这是about,<a href="#home">home</a></h1>'}
    }
    
    var path=location.href;
    path=path.substring(path.lastIndexOf('#')+1);

    var app=new Vue({
        el:'#app',
        data:{path},
        render:function(createElment) {
            var page=routes[this.path];
            return createElment(page);
        }
    });

    window.addEventListener('hashchange', function() {
        var path=location.href;
        path=path.substring(path.lastIndexOf('#')+1);
        app.path=path;
    });

  
</script>
</body>
</html>
